<template>
    <div class="filter-container">
        <el-row>
            <el-col :span="4">
               <div style="color:white;margin-left: 2%">
                 <!--                  <el-select v-model="company" placeholder="公司">
                                    <el-option
                                      v-for="item in companySelect"
                                      :key="item.id"
                                      :label="item.companyName"
                                    >
                                      {{item.companyName}}
                                    </el-option>
                                  </el-select>-->
<!--                  <slot name="slot1"
                      v-for="item in items"
                      :dos="item.do"
                  ></slot>-->
                </div>
            </el-col>
            <el-col :span="14">
                <el-input @keyup.enter.native="handleFilter" style="width: 300px;" class="filter-item" :placeholder="placeholder" v-model="keywords">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">
                    搜索
                </el-button>
            </el-col>
            <el-col v-if="!isShow" :span="2">
                <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="success" icon="el-icon-plus">添加
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import waves from '@/directive/waves' // 水波纹指令
    export default {
        name: 'search',
        directives: {waves},
        props: {
            items:Object,
            searchText: String,
            placeholder:String,
            isShow:String
        },
        data() {
            return {
              company:'',
              companySelect:[
                {id:1,companyName:'全椒海螺'},
                {id:2,companyName:'天山海螺'},
                {id:3,companyName:'芜湖海螺'},
              ],
                keywords: this.searchText//子组件的值会变化, 不改变父组件的值重新赋值
            }
        },
        created(){},
        methods:{
            handleFilter(val){
                // console.log(this.keywords);
                // console.log(val);
                this.$emit('doSearch',this.keywords);
            },
            handleCreate(){
                this.$emit('handleCreate');
            }
        }
    }
</script>

